<template>
  <div class="checkout-container">
    <el-card class="checkout-card">
      <h2>订单支付</h2>
      <el-divider></el-divider>

      <div class="order-info">
        <p>订单号：{{ "O" + orderLength?.toString().padStart(3, "0") }}</p>
        <span
          >下单用户：
          <ul>
            <li style="color: #409eff; font-weight: bold">
              用户名称：{{ loginPerson.username }}
            </li>
            <li style="color: #409eff; font-weight: bold">
              用户ID：{{ loginPerson.id }}
            </li>
          </ul>
        </span>
      </div>

      <el-divider></el-divider>

      <div class="product-list">
        <h3>商品清单</h3>
        <el-table :data="cart" style="width: 100%">
          <el-table-column prop="img" label="商品图片">
            <template #default="scope">
              <el-image
                :src="scope.row.img"
                alt="商品图片"
                class="product-image"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="product_name"
            label="商品名称"
          ></el-table-column>
          <el-table-column
            prop="supplier_name"
            label="供应商名称"
          ></el-table-column>
          <el-table-column prop="price" label="单价"></el-table-column>
          <el-table-column prop="number" label="数量"></el-table-column>
          <el-table-column label="小计">
            <template slot-scope="scope">
              {{ scope.row.price * scope.row.number }} 元
            </template>
          </el-table-column>
        </el-table>
        <p
          style="
            font-size: 16px;
            font-weight: bold;
            margin-top: 10px;
            color: #409eff;
          "
        >
          总金额：{{ totalPrice }} 元
        </p>
      </div>

      <el-button
        type="primary"
        size="large"
        class="confirm-btn"
        @click="confirmPayment"
      >
        确认支付
      </el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "CheckoutView",
  computed: {
    cart() {
      // 修改这里，添加空值检查
      return (
        (this.$store.state.shoppingCart?.shoppingCartList || []).find(
          (c) => c.user_id === this.loginPerson.id
        )?.product_list || []
      );
    },
    loginPerson() {
      return (
        this.$store.state.loginPerson ||
        JSON.parse(localStorage.getItem("loginPerson"))
      );
    },
    orderLength() {
      return (
        (this.$store.state.order?.orderList?.length ||
          JSON.parse(localStorage.getItem("vuex-orders"))?.length) + 1
      );
    },
    totalPrice() {
      return this.cart.reduce(
        (total, item) => total + item.price * item.number,
        0
      );
    },
  },
  methods: {
    confirmPayment() {
      this.$confirm("确认完成支付？", "支付确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        console.log(this.cart);
        const newOrder = {
          order_id: "O" + this.orderLength?.toString().padStart(3, "0"),
          order_Date: new Date().toISOString().split("T")[0],
          price: this.totalPrice,
          order_a: this.loginPerson.username,
          order_a_id: this.loginPerson.id,
          order_b: this.cart.map((item) => item.supplier_id).join(","),
          order_b_id: this.cart.map((item) => item.supplier_id).join(","),
          product_list: this.cart,
        };
        this.$store.dispatch("order/addOrder", newOrder);
        this.$store.dispatch("shoppingCart/clearCart", this.loginPerson.id);
        this.$message.success("支付成功！");
        this.$router.push("/order");
      });
    },
  },
};
</script>

<style scoped>
.checkout-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}
.checkout-card {
  padding: 30px;
}
.order-info p {
  margin: 15px 0;
  font-size: 16px;
}
.confirm-btn {
  margin-top: 30px;
  width: 200px;
}
</style>
